<template>
    <div class="systemConfig">
        <el-tabs type="border-card">
            <!-- 网站信息 -->
            <el-tab-pane>
                <span slot="label"><i class="el-icon-date"></i>网站信息</span>
                <!-- 系统配置的表单 -->
                <el-form
                    style="margin-left: 20px"
                    label-width="100px"
                    label-position="left"
                    :model="sizeForm"
                >
                    <!-- LOGO -->
                    <el-form-item label="LOGO">
                        <el-upload
                            class="avatar-uploader"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :show-file-list="false"
                        >
                            <img
                                v-if="imageUrl"
                                :src="imageUrl"
                                class="avatar"
                            />
                            <i
                                v-else
                                class="el-icon-plus avatar-uploader-icon"
                            ></i>
                        </el-upload>
                    </el-form-item>
                    <!-- 1 -->
                    <el-row>
                        <el-col :span="10">
                            <!-- 网站名称 -->
                            <el-form-item label="网站名称">
                                <el-input
                                    v-model="webConfigList.name"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <!-- 标题 -->
                            <el-form-item label="标题">
                                <el-input
                                    v-model="webConfigList.title"
                                ></el-input> </el-form-item
                        ></el-col>
                    </el-row>
                    <!-- 2 -->
                    <el-row>
                        <el-col :span="10">
                            <!-- 关键字 -->
                            <el-form-item label="关键字">
                                <el-input
                                    v-model="webConfigList.summary"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <!-- 描述 -->
                            <el-form-item label="描述">
                                <el-input
                                    v-model="webConfigList.summary"
                                ></el-input> </el-form-item
                        ></el-col>
                    </el-row>
                    <!-- 3 -->
                    <el-row>
                        <el-col :span="10">
                            <!-- 网站名称 -->
                            <el-form-item label="作者">
                                <el-input
                                    v-model="webConfigList.author"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <!-- 标题 -->
                            <el-form-item
                                label="备案号
"
                            >
                                <el-input
                                    v-model="webConfigList.recordNum"
                                ></el-input> </el-form-item
                        ></el-col>
                    </el-row>
                    <!-- 4 -->
                    <el-row>
                        <el-col :span="10">
                            <!-- 网站名称 -->
                            <el-form-item label="登录方式">
                                <el-checkbox-group v-model="checkList">
                                    <el-checkbox label="1"
                                        >账号密码</el-checkbox
                                    >
                                    <el-checkbox label="2">码云</el-checkbox>
                                    <el-checkbox label="3">Github</el-checkbox>
                                    <el-checkbox label="4">QQ</el-checkbox>
                                    <el-checkbox label="5">微信</el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!-- 支付 -->
                    <el-row :gutter="20">
                        <!-- 阿里支付 -->
                        <el-col :span="6">
                            <el-form-item label="阿里支付">
                                <el-upload
                                    class="avatar-uploader"
                                    action="https://jsonplaceholder.typicode.com/posts/"
                                    :show-file-list="false"
                                >
                                    <img
                                        v-if="aliPayPhoto"
                                        :src="aliPayPhoto"
                                        class="avatar"
                                    />
                                    <i
                                        v-else
                                        class="el-icon-plus avatar-uploader-icon"
                                    ></i>
                                </el-upload>
                            </el-form-item>
                        </el-col>
                        <!-- 微信支付 -->
                        <el-col :span="6">
                            <el-form-item label="微信支付">
                                <el-upload
                                    class="avatar-uploader"
                                    action="https://jsonplaceholder.typicode.com/posts/"
                                    :show-file-list="false"
                                >
                                    <img
                                        v-if="weixinPayPhoto"
                                        :src="weixinPayPhoto"
                                        class="avatar"
                                    />
                                    <i
                                        v-else
                                        class="el-icon-plus avatar-uploader-icon"
                                    ></i>
                                </el-upload>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!-- 网站评论 -->
                    <el-form-item label="网站评论">
                        <el-radio
                            v-model="webConfigList.startComment"
                            label="1"
                            border
                            >开启</el-radio
                        >
                        <el-radio
                            v-model="webConfigList.startComment"
                            border
                            label="2"
                            >关闭</el-radio
                        >
                    </el-form-item>
                </el-form>
            </el-tab-pane>

            <!-- 关注我们 -->
            <el-tab-pane>
                <span slot="label"><i class="el-icon-date"></i>关注我们</span>
                <!-- 关注我们表单 -->
                <el-form
                    style="margin-left: 20px"
                    label-width="100px"
                    label-position="left"
                    :model="sizeForm"
                    class="attention"
                >
                    <!-- 邮箱 -->
                    <el-form-item label="邮箱">
                        <el-input v-model="webConfigList.email"></el-input>
                        <el-checkbox checked>在首页显示</el-checkbox>
                    </el-form-item>
                    <!-- QQ号 -->
                    <el-form-item label="QQ号">
                        <el-input v-model="webConfigList.qqNumber"></el-input>
                        <el-checkbox checked>在首页显示</el-checkbox>
                    </el-form-item>
                    <!-- QQ群 -->
                    <el-form-item label="QQ群">
                        <el-input v-model="webConfigList.qqGroup"></el-input>
                        <el-checkbox checked>在首页显示</el-checkbox>
                    </el-form-item>
                    <!-- github -->
                    <el-form-item label="github">
                        <el-input v-model="webConfigList.github"></el-input>
                        <el-checkbox checked>在首页显示</el-checkbox>
                    </el-form-item>
                    <!-- Gitee -->
                    <el-form-item label="Gitee">
                        <el-input v-model="webConfigList.gitee"></el-input>
                        <el-checkbox checked>在首页显示</el-checkbox>
                    </el-form-item>
                    <!-- 微信 -->
                    <el-form-item label="微信">
                        <el-input v-model="webConfigList.weChat"></el-input>
                        <el-checkbox>在首页显示</el-checkbox>
                    </el-form-item>
                </el-form></el-tab-pane
            >
        </el-tabs>
    </div>
</template>

<script>
import { webConfig } from "@/api/system.js";
export default {
    name: "systemConfig",
    data() {
        return {
            sizeForm: {
                resource: "",
            },
            // LOGO
            imageUrl: null,
            // 微信图片
            weixinPayPhoto: null,
            // 阿里图片
            aliPayPhoto: null,
            // 网站名称
            checkList: [],
            // 网站配置相关数据
            webConfigList: {},
            data: {},
            checkList: ["1", "3", "2", "4"],
        };
    },
    created() {
        this.getWebConfig();
    },
    methods: {
        async getWebConfig() {
            try {
                const { data: res } = await webConfig();
                this.webConfigList = res.data;
                this.imageUrl = this.webConfigList.photoList[0];
                this.aliPayPhoto = this.webConfigList.aliPayPhoto;
                this.weixinPayPhoto = this.webConfigList.weixinPayPhoto;
            } catch (error) {
                console.log(error);
            }
        },
    },
    watch: {
        checkList() {
            this.checkList = this.webConfigList.loginTypeList;
        },
    },
};
</script>

<style lang="less" scoped>
.systemConfig {
    /deep/ .el-form {
        .el-form-item__label {
            font-weight: 700;
        }
        .el-alert {
            margin-bottom: 20px !important;
            .el-alert__content {
                .el-alert__title {
                    color: #333;
                    font-size: 16px;
                    line-height: 32px;
                }
            }
        }
        .el-input {
            width: 400px;
            .el-input__inner {
                width: 100%;
            }
        }

        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        // logo
        .avatar-uploader .el-upload:hover {
            border-color: #409eff;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 110px;
            height: 110px;
            line-height: 110px;
            text-align: center;
        }
        .avatar {
            width: 110px;
            height: 110px;
            display: block;
        }
    }
    // 关注我们的样式
    .attention {
        /deep/ .el-checkbox {
            margin-left: 10px;
        }
    }
}
</style>